<template>
  <div>
   <!-- 轮播图区 -->
   <van-swipe :autoplay="3000" indicator-color="white">
     <van-swipe-item v-for="(image,index) in images" :key="index">
       <img v-lazy="image" />//懒加载图片
     </van-swipe-item>
   </van-swipe>

   <van-grid :column-num="3" square>
     <van-grid-item icon="location" text="新闻资讯" style="color: #42B983;"/>
     <van-grid-item icon="coupon" text="图片分享" style="color: red;"/>
     <van-grid-item icon="cart" text="商品购买"  style="color: blue;"/>
     <van-grid-item icon="comment-circle" text="留言反馈"  style="color: lightskyblue;"/>
     <van-grid-item icon="video" text="视频专区"  style="color: orange;"/>
     <van-grid-item icon="service" text="联系我们"  style="color: orangered;"/>
   </van-grid>
  </div>
</template>

<script>
  import bb from '../../assets/0.jpg'
  import bn from '../../assets/1.jpg'
  import bm from '../../assets/2.jpg'
  import bg from '../../assets/bg.jpg'

  export default{
    name:'home',
    data(){
      return{
        images:[
          bb,
          bn,
          bm,
          bg
        ]
      }
    },
    created(){
      // this.getLunbotu()
    },
    methods:{
      // getLunbotu(){
      //   this.$http.get('http://vue.studyit.io/api/getlunbo').then(result=>{
      //     console.log(result.body)
      //   })
      // }
    }
  }
</script>

<style lang="scss" scoped>
.van-swipe{
    height: 300px;
    .van-swipe-item{
    }
  }
  img{
    height: 300px;
    width: 100%;
  }
</style>
